<template>
  <div class="pl-[50px]">
    <el-table :data="data" :row-key="rowKey" class-name="nestedTable">
      <el-table-column type="expand" v-if="hasChildren">
        <template #default="{ row }">
          <div v-if="row.childrenDeptList && row.childrenDeptList.length > 0">
            <nested-table :data="row.childrenDeptList" :row-key="rowKey" :loading="loading" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" width="120" />
      <el-table-column width="150" align="center">
        <template #default="{ row }">
          {{
            `${row.deptRoiCost?.thatdayTotalAmount !== undefined ? row.deptRoiCost?.thatdayTotalAmount : 0}/${row.deptRoiCost?.thatdayTotalAmountCny !== undefined ? row.deptRoiCost?.thatdayTotalAmountCny : 0}`
          }}
        </template>
      </el-table-column>
      <el-table-column prop="totalSpend" width="170" align="center">
        <template #default="{ row }">
          {{
            `${row.deptRoiCost?.totalSpend !== undefined ? row.deptRoiCost?.totalSpend : 0}/${row.deptRoiCost?.totalSpendCny !== undefined ? row.deptRoiCost?.totalSpendCny : 0}`
          }}
        </template>
      </el-table-column>
      <el-table-column prop="spend" align="center">
        <template #default="{ row }">
          {{ row.deptRoiCost?.spend !== undefined ? row.deptRoiCost?.spend : 0 }}
        </template>
      </el-table-column>
      <el-table-column prop="tkSpend" align="center">
        <template #default="{ row }">
          {{ row.deptRoiCost?.tkSpend !== undefined ? row.deptRoiCost?.tkSpend : 0 }}
        </template>
      </el-table-column>
      <el-table-column prop="thatdayPaidTotalNum" width="80" align="center">
        <template #default="{ row }">
          {{
            row.deptRoiCost?.thatdayPaidTotalNum !== undefined
              ? row.deptRoiCost?.thatdayPaidTotalNum
              : 0
          }}
        </template>
      </el-table-column>
      <el-table-column prop="name" width="170" align="center">
        <template #default="{ row }">
          {{
            `${row.deptRoiCost?.avgSpend !== undefined ? row.deptRoiCost?.avgSpend : 0}/${row.deptRoiCost?.avgSpendCny !== undefined ? row.deptRoiCost?.avgSpendCny : 0}`
          }}
        </template>
      </el-table-column>
      <el-table-column prop="name" width="170" align="center">
        <template #default="{ row }">
          {{
            `${row.deptRoiCost?.avgAmount !== undefined ? row.deptRoiCost?.avgAmount : 0}/${row.deptRoiCost?.avgAmountCny !== undefined ? row.deptRoiCost?.avgAmountCny : 0}`
          }}
        </template>
      </el-table-column>
      <el-table-column prop="adRoi" align="center">
        <template #default="{ row }">
          {{ row.adRoi !== undefined ? row.adRoi : 0 }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  rowKey: {
    type: String,
    default: 'id'
  },
  loading: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array,
    required: true
  }
})

// 计算属性，判断是否有子部门
const hasChildren = computed(() => {
  return props.data.some((row) => row.childrenDeptList && row.childrenDeptList.length > 0)
})
// 格式化数据显示
const formatValue = (value) => {
  return value || '-'
}
</script>
<style lang="scss" scoped>
:deep(.el-table.nestedTable thead) {
  display: none !important;
}
:deep(.el-table.nestedTable .el-table__inner-wrapper::before) {
  display: none !important;
}
:deep(.el-table.nestedTable td.el-table__cell) {
  // border-bottom: 0px !important;
  border-bottom: 1px solid #f1f1f1;
}
:deep(.el-table.nestedTable td.el-table__cell) {
  // box-shadow: 0px 2px 1px rgba(55, 33, 255, 0.05) !important;
}
</style>
